<template>
	<view class="content font_family">
		<view class="top f_j" :style="{paddingTop:menuButtonInfo}">
			<image class="back" @click="back" src="../../static/msg/back_icon.png" mode=""></image>
			<view class="top_search f_j">
				<image src="../../static/index/ss_icon.png" mode=""></image>
				<u--input placeholder="搜索专区名" border="none" v-model="query_data.keyword" @confirm='confirm'></u--input>
			</view>
		</view>
		<view class="list" v-if="list.length>0">
			<view class="item f_z_b f_w">
				<view class="left f_z_b f_j f_w" :style="{background:item.color}" v-for="(item,index) in list"
					:key="index" @click="go(`/pages/sp_zq/detail?id=${item.id}`)">
					<view class="text">
						<text class="zq_title">{{item.name}}</text>
						<view class="btn f_zj" :style="{background:item.btn_color}">
							立即选购
						</view>
					</view>
					<image :src="item.image" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="pp_list f f_w">
			<view class="item" :class="{right_no:(index+1)%3==0}" v-for="(item,index) in pp_list" :key="index"
				@click="go_detail(item)">
				<image :src="item.image" mode="aspectFill"></image>
				<view class="msg f_d f f_j">
					<view class="title">
						主营:{{item.zy | yy_str}}
					</view>
					<view class="hot">
						热销{{item.rx}}件
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="list.length==0 && pp_list.length==0" text='还没有专区哦~' icon="/static/public/kong.png">
		</u-empty>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import { theme_list, brand_list_a } from '@/api/page.js'
	export default {
		computed: {
			...mapState(['menuButtonInfo', 'dl_id'])
		},
		data() {
			return {
				query_data: {
					keyword: '',
					dl: '',
					limit: 1000
				},
				list: [],
				pp_list: []
			}
		},
		onLoad() {
			this.query_data.dl = this.dl_id
			this.get_theme()
			this.get_brand()
		},
		filters: {
			yy_str(str) {
				let totalLength = 0;
				let slicedStr = '';
				let maxLength = 12

				for (let i = 0; i < str.length; i++) {
					const char = str[i];
					const charCode = char.charCodeAt(0);

					if (charCode >= 0 && charCode <= 128) {
						totalLength += 1; // 英文字符长度为1
					} else {
						totalLength += 2; // 中文等unicode字符长度为2
					}

					if (totalLength > maxLength) {
						break; // 已经超过最大长度，退出循环
					}

					slicedStr += char; // 将字符追加到截取字符串上
				}

				if (totalLength >= maxLength && slicedStr[slicedStr.length - 1].charCodeAt(0) >= 0x7f) {
					slicedStr = slicedStr.slice(0, -1); // 如果截取的最后一个字符是半个字符，需要再次截取
				}

				return slicedStr;
			}
		},
		methods: {
			get_theme() {
				theme_list(this.query_data).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			get_brand() {
				brand_list_a().then(res => {
					if (res.code == 1) {
						this.pp_list = res.data
					}
				})
			},
			confirm() {
				if (!this.query_data.keyword) {
					uni.showToast({
						icon: 'none',
						title: "输入你想要搜索的专区吧！"
					})
					return
				}
				this.get_theme()
			},
			go_detail(item) {
				let msg = JSON.stringify(item)
				this.go(`/pages/sp_zq/pp_detail?msg=${msg}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: linear-gradient(to bottom, rgb(246, 240, 238) 0%, rgb(249, 251, 252) 60%);

		.top {
			.back {
				margin-left: 30rpx;
				width: 42rpx;
				height: 42rpx;
			}

			.top_search {
				margin-left: 20rpx;
				width: 420rpx;
				padding: 15rpx 30rpx;
				background: #F6F7F9;
				border-radius: 630rpx 630rpx 630rpx 630rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 30rpx;
				}
			}
		}

		.list {
			// margin-top: 20rpx;
			padding: 30rpx;

			.item {
				margin-top: 22rpx;

				.zq_title {
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
				}

				.btn {
					margin-top: 30rpx;
					width: 136rpx;
					height: 44rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					border-radius: 334rpx 334rpx 334rpx 334rpx;
				}

				image {
					width: 96rpx;
					height: 92rpx;
				}

				.left {
					width: 330rpx;
					// background: linear-gradient(134deg, #EEBB6A 0%, #F4D091 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					box-sizing: border-box;
					padding: 30rpx;
					margin-bottom: 20rpx;

					.btn {

						background: #E5A744;
					}
				}

				.right {
					width: 312rpx;
					// background: linear-gradient(134deg, #E24848 0%, #F97976 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					box-sizing: border-box;
					padding: 30rpx;

					.btn {
						background: #CD3331;
					}
				}
			}
		}

		.pp_list {
			padding: 30rpx;
			padding-top: 0rpx;

			.right_no {
				margin-right: 0rpx !important;
			}

			.item {
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				overflow: hidden;
				width: 32%;
				margin-right: 2%;
				background-color: #FFFFFF;
				margin-bottom: 20rpx;

				image {
					width: 100%;
					height: 250rpx;
					vertical-align: bottom;
				}

				.msg {
					padding: 15rpx;

					.title {
						text-align: center;
						width: 100%;
						font-weight: 600;
						font-size: 28rpx;
						color: #343434;
						// overflow: hidden;
						// white-space: nowrap;
					}

					.hot {
						margin-top: 15rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #E1222A;
					}
				}
			}
		}
	}
</style>